<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

	<head>
		<title>爱学习交流平台官网</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/bootstrap.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/animate.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/owl.carousel.min.css">

		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/flaticon/font/flaticon.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/magnific-popup.css">

		<!-- Theme Style -->
		<link rel="stylesheet" href="css/style.css">
		<style type="text/css">
			#header {
				position: fixed;
			}
		</style>
	</head>

	<body>

		<header role="banner" id="header">

			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#entireNavbar" aria-controls="entireNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
					<div class="collapse navbar-collapse navbar-light" id="entireNavbar">
						<ul class="navbar-nav ">
							<li class="nav-item">
								<a class="nav-link active" href="index2.jsp">首页</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="courses.jsp" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">课程</a>
								<div class="dropdown-menu" aria-labelledby="dropdown04" id="tabdiv">
									<!-- 	<a class="dropdown-item" href="courses.jsp">HTML</a>
									<a class="dropdown-item" href="courses.jsp">WordPress</a>
									<a class="dropdown-item" href="courses.jsp">Laravel</a>
									<a class="dropdown-item" href="courses.jsp">JavaScript</a>
									<a class="dropdown-item" href="courses.jsp">Python</a> -->
								</div>

							</li>

							<!--<li class="nav-item">
								<a class="nav-link" href="#" id="PersonalCenter">个人中心</a>
							</li>-->
							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于我们</a>
							</li>

						</ul>
						<ul class="navbar-nav absolute-right" id="status1">
							<img class="rounded-circle mt-3" src="images/2.png" width="50" height="50" id="image" />
							<li class="dropdown">
								<a class="nav-link dropdown-toggle">${sessionScope.name}</a>
								<div class="dropdown-menu" aria-labelledby="dropdown05">
									<a href="PersonalCenter.jsp" class="dropdown-item">个人中心</a>
									<a href="${pageContext.request.contextPath}/AccountLoginAndLogout?op=exit" class="dropdown-item" href="#">退出登录</a>
								</div>
							</li>
						</ul>
						<ul class="navbar-nav absolute-right" id="status2">
							<li>
								<a href="login.jsp">登录</a> /
								<a href="register.jsp">注册</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- END header -->

		<section class="site-hero overlay" id="firstSection" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_2.jpg);">
			<div class="container">
				<div class="row align-items-center justify-content-center site-hero-inner">
					<div class="col-md-10">

						<div class="mb-5 element-animate">
							<div class="block-17">

								<a href="${pageContext.request.contextPath}/front/courses.jsp">
									<h2 class="heading text-center mb-4">点击这里查找适合您的课程</h2>
								</a>
								<p class="text-center mb-5">我们提供500多种课程来提高您的技能</p>

							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<section class="site-section element-animate">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-md-6 order-md-2">
						<div class="block-16">
							<figure>

								<video width="700" controls controlsList='nofullscreen nodownload noremote'>
									<source src="video/1.mp4">
								</video>
							</figure>
						</div>
					</div>
					<div class="col-md-6 order-md-1">

						<div class="block-15">
							<div class="heading">
								<h2>欢迎来到爱学习</h2>
							</div>
							<div class="text mb-5">
								<p>“学习网”系统，以“学”、“拓”，“测”三重结合的新模式，全方位巩固学生所学知识点，避免了学生对平面化学习方式的抵触与反感，增强学习趣味性，让学生和家长充分认知到学生的学习水平情况，并指导学生有针对性的进行复习。</p>
							</div>
						</div>

					</div>

				</div>

			</div>
		</section>

		<section class="site-section bg-light element-animate" id="section-counter">
			<div class="container">
				<div class="row">
					<div class="col-lg-6">
						<figure><img src="images/img_2_b.jpg" alt="Image placeholder" class="img-fluid"></figure>
					</div>
					<div class="col-lg-5 ml-auto">
						<div class="block-15">
							<div class="heading">
								<h2>教育就是生命</h2>
							</div>
							<div class="text mb-5">
								<p>“学习网”系统，以“学”、“拓”，“测”三重结合的新模式，全方位巩固学生所学知识点，避免了学生对平面化学习方式的抵触与反感，增强学习趣味性，让学生和家长充分认知到学生的学习水平情况，并指导学生有针对性的进行复习。</p>
							</div>
						</div>

						<div class="row">
							<div class="col-md-6">
								<div class="block-18 d-flex align-items-center">
									<div class="icon mr-4">
										<span class="flaticon-student"></span>
									</div>
									<div class="text">
										<strong class="number" data-number="12921">0</strong>
										<span>学生们</span>
									</div>
								</div>

								<div class="block-18 d-flex align-items-center">
									<div class="icon mr-4">
										<span class="flaticon-university"></span>
									</div>
									<div class="text">
										<strong class="number" data-number="51">0</strong>
										<span>学校</span>
									</div>
								</div>

							</div>
							<div class="col-md-6">
								<div class="block-18 d-flex align-items-center">
									<div class="icon mr-4">
										<span class="flaticon-books"></span>
									</div>
									<div class="text">
										<strong class="number" data-number="3902">0</strong>
										<span>图书</span>
									</div>
								</div>

								<div class="block-18 d-flex align-items-center">
									<div class="icon mr-4">
										<span class="flaticon-mortarboard"></span>
									</div>
									<div class="text">
										<strong class="number" data-number="1921">0</strong>
										<span>应届毕业生</span>
									</div>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<div class="site-section bg-light">
			<div class="container">
				<div class="row justify-content-center mb-5 element-animate">
					<div class="col-md-7 text-center section-heading">
						<h2 class="text-primary heading">热门课程</h2>
						<p>JAVA、PHP、JavaScript、UI、Python</p>
						<p>
							<a href="courses.jsp" class="btn btn-primary py-2 px-4"><span class="ion-ios-book mr-2"></span>现在学习</a>
						</p>
					</div>
				</div>
			</div>
			<div class="container-fluid block-11 element-animate">
				<div class="nonloop-block-11 owl-carousel">
					<div class="item">
						<div class="block-19">
							<figure>
								<a href="courses.jsp"><img src="images/js1.jpg" alt="Image" class="img-fluid"></a>
							</figure>
							<div class="text">
								<h2 class="heading"><a href="courses.jsp">JavaScript 学习</a></h2>
								<p class="mb-4">JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 </p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<a href="courses.jsp"><img src="images/ui1.jpg" alt="Image" class="img-fluid"></a>
							</figure>
							<div class="text">
								<h2 class="heading"><a href="courses.jsp">UI学习</a></h2>
								<p class="mb-4">UI设计（或称界面设计）是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI，互联网常用的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<a href="courses.jsp"><img src="images/java1.jpg" alt="Image" class="img-fluid"></a>
							</figure>
							<div class="text">
								<h2 class="heading"><a href="courses.jsp">JAVA学习</a></h2>
								<p class="mb-4">Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>1,903/3,000</span>
									</div>
									<div class="price text-right"><span>$10.99</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<a href="courses.jsp"><img src="images/python1.jpg" alt="Image" class="img-fluid"></a>
							</figure>
							<div class="text">
								<h2 class="heading"><a href="courses.jsp">Python学习</a></h2>
								<p class="mb-4">Python是一种跨平台的计算机程序设计语言。 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越多被用于独立的、大型项目的开发。</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>23/100</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

					<div class="item">
						<div class="block-19">
							<figure>
								<a href="courses.jsp"><img src="images/php1.jpg" alt="Image" class="img-fluid"></a>
							</figure>
							<div class="text">
								<h2 class="heading"><a href="courses.jsp">PHP学习</a></h2>
								<p class="mb-4">PHP即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。</p>
								<div class="meta d-flex align-items-center">
									<div class="number">
										<span>2,219/6,000</span>
									</div>
									<div class="price text-right"><del class="mr-3">$23</del><span>Free</span></div>
								</div>
							</div>
						</div>
					</div>

				</div>
				<!-- END section -->

				<div class="container site-section element-animate">
					<div class="row justify-content-center mb-5">
						<div class="col-md-7 text-center section-heading">
							<h2 class="text-primary heading">专业师资</h2>
							<p>老师专业实力够硬才是起跑点</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6 col-lg-4">
							<div class="block-2">
								<div class="flipper">
									<div class="front" style="background-image: url(../front/images/person_3.jpg);">
										<div class="box">
											<h2>Job Smith</h2>
											<p>Laravel Expert</p>
										</div>
									</div>
									<div class="back">
										<!-- back content -->
										<blockquote>
											<p>&ldquo;16年行业及教学经验;Adobe委员会委员、Adobe交互设计TOP100认证设计师;16年数字艺术设计及培训经验，擅长UI设计、网站设计。全国计算机职业技能考试(NIT-Pro)认证讲师;对客户需求有着精准的分析及把控能力。授课风格幽默生动，注重项目经验和技巧的分享。讲课富有激情，善于激发学员的思维，善于激励学员的学习氛围&rdquo;</p>
										</blockquote>
										<div class="author d-flex">
											<div class="image mr-3 align-self-center">
												<img src="../front/images/person_3.jpg" alt="">
											</div>
											<div class="name align-self-center">Job Smith <span class="position">Laravel Expert</span></div>
										</div>
									</div>
								</div>
							</div>
							<!-- .flip-container -->
						</div>

						<div class="col-md-6 col-lg-4">
							<div class="block-2 ">
								<div class="flipper">
									<div class="front" style="background-image: url(../front/images/person_1.jpg);">
										<div class="box">
											<h2>Mellissa Cruz</h2>
											<p>JavaScript Guru</p>
										</div>
									</div>
									<div class="back">
										<!-- back content -->
										<blockquote>
											<p>&ldquo;熟悉前端互联网及移动设备应用开发；精通Web前端开发、主流前端架；精通Java编程语言、JavaEE企业级开源框架应用开发；精通基于IOS系统平台的移动互联网应用开发；熟悉Python应用开发，数据分析；熟悉主流数据库、系统分析建模、项目管理等&rdquo;</p>
										</blockquote>
										<div class="author d-flex">
											<div class="image mr-3 align-self-center">
												<img src="images/person_1.jpg" alt="">
											</div>
											<div class="name align-self-center">Mellissa Cruz <span class="position">JavaScript Guru</span></div>
										</div>
									</div>
								</div>
							</div>
							<!-- .flip-container -->
						</div>

						<div class="col-md-6 col-lg-4">
							<div class="block-2">
								<div class="flipper">
									<div class="front" style="background-image: url(../front/images/person_2.jpg);">
										<div class="box">
											<h2>Aldin Powell</h2>
											<p>WordPress Ninja</p>
										</div>
									</div>
									<div class="back">
										<!-- back content -->
										<blockquote>
											<p>&ldquo;曾任美国avepoint公司开发工程师，服务于新加坡政府项目，具有5年的JAVA 企业应用开发经验和内训经验。授课生动有趣、条理清晰、通俗易懂,节奏明快,善于理论联系实践。&rdquo;</p>
										</blockquote>
										<div class="author d-flex">
											<div class="image mr-3 align-self-center">
												<img src="../front/images/person_2.jpg" alt="">
											</div>
											<div class="name align-self-center">Aldin Powell <span class="position">WordPress Ninja</span></div>
										</div>
									</div>
								</div>
							</div>
							<!-- .flip-container -->
						</div>
					</div>
				</div>

				<footer class="site-footer">
					<div class="container">
						<div class="row mb-5">
							<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
								<h3>爱学习</h3>
								<p></p>
							</div>
							<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
								<h3 class="heading">快速链接</h3>
								<div class="row">
									<div class="col-md-6">
										<ul class="list-unstyled">
											<li>
												<a href="index2.jsp">首页</a>
											</li>
											<li>
												<a href="about.jsp">关于我们</a>
											</li>
											<li>
												<a href="courses.jsp">培训班</a>
											</li>

										</ul>
									</div>

								</div>
							</div>

							<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
								<h3 class="heading">联系信息</h3>
								<div class="block-23">
									<ul>
										<li><span class="icon ion-android-pin"></span><span class="text">大连爱学习总部</span></li>
										<li><span class="icon ion-ios-telephone"></span><span class="text">+2 392 3929 210</span></li>
										<li><span class="icon ion-android-mail"></span><span class="text">865681467@qq.com</span></li>
										<li><span class="icon ion-android-time"></span><span class="text">星期一 &mdash; 星期五 8:00am - 5:00pm</span></li>
									</ul>
								</div>
							</div>
						</div>

					</div>
				</footer>
				<!-- END footer -->

				<!-- loader -->
				<div id="loader" class="show fullscreen">
					<svg class="circular" width="48px" height="48px">
						<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
						<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
					</svg>
				</div>

				<script src="${pageContext.request.contextPath}/front/js/jquery-3.2.1.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/jquery-migrate-3.0.0.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/popper.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/bootstrap.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/owl.carousel.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/jquery.waypoints.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/jquery.stellar.min.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/jquery.animateNumber.min.js"></script>

				<script src="${pageContext.request.contextPath}/front/js/jquery.magnific-popup.min.js"></script>

				<script src="${pageContext.request.contextPath}/front/js/main.js"></script>
				<script src="${pageContext.request.contextPath}/front/js/layer/layer.js"></script>
				<script type="text/javascript">
					$(function() {
						$('#firstSection').css('margin-top', $('header').height());

						if("${sessionScope.name}" != "" && "${sessionScope.accountPic}".trim() != "") {

							$("#status1 img").attr('src', '${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=${sessionScope.accountPic}');
							$("#status2").hide()
						} else if("${sessionScope.name}" != "" && "${sessionScope.accountPic}".trim() == "") {
							$("#status2").hide()
							$("#status1 img").attr('src', 'images/2.png');
						} else if("${sessionScope.name}" == "") {
							$("#status1").hide()
							$("#home").removeAttr('onclick')
						}

						//发送ajax请求
						$.ajax({
							async: true,
							url: "${pageContext.request.contextPath}/TabServlet",
							type: "GET",
							data: {
								op: "getAllTab"
							},
							dataType: "json",
							success: function(result, status, xhr) {
								//清空数据
								$('#tabdiv').empty();
								$.each(result, function(index, tab) {
									if(index < 3) {
										$('#tabdiv').append("<a class=\"dropdown-item\" href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + "</a>");
									}
								});
							},
							error: function(xhr, status, error) {
								layer.msg("请求失败");
							}
						});

					});
				</script>
	</body>

</html>